{% load static %}
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>首页-空气污染数据可视化平台</title>
    <meta name="description" content="首页-空气污染数据可视化平台">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="{% static 'css/font-awesome.min1.css' %}">
    <link rel="stylesheet" href="{% static 'css/simple-line-icons1.css' %}">
    <link rel="stylesheet" href="{% static 'css/linea-basic1.css' %}">
    <link rel="stylesheet" href="{% static 'css/pe-icon-7-stroke2.css' %}">
    <link rel="stylesheet" href="{% static 'css/countrySelect.min1.css' %}">
    <link rel="stylesheet" href="{% static 'css/perfect-scrollbar1.css' %}">
    <link rel="stylesheet" href="{% static 'css/bootstrap.min1.css' %}">
    <link rel="stylesheet" href="{% static 'css/owl.carousel.min2.css' %}">
    <link rel="stylesheet" href="{% static 'css/presets1.css' %}">
    <link rel="stylesheet" href="{% static 'css/style1.css' %}">
    <link rel="stylesheet" href="{% static 'css/index-011.css' %}">
    <link rel="stylesheet" href="{% static 'css/responsive.css' %}">
    <link rel="stylesheet" href="{% static 'css/common.css' %}">
    <link rel="stylesheet" href="{% static 'css/map.css' %}">
</head>
<body class="index-01">
<header class="top-header media">
    <div class="top-left mr-3"><a class="navbar-brand" href="">
        <img src="{% static 'picture/logo1.png' %}" alt="Site Logo"></a>
    </div>
    <div class="top-right media-body">
        <div class="left-content float-left">
            <a href="#" class="sidenav-toggle mr-2" data-toggle="push-menu" role="button">
                <span class="sr-only">切换导航</span>
                <i class="fa fa-bars"> </i>
            </a>
        </div>
        <div class="right-content float-right">
            <div class="country dropdown">
                <div id="country_selector"></div>
            </div>
            <div class="dropdown user-menu"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><img
                    src="{% static 'picture/1.jpg' %}" class="rounded-circle float-left mr-2" alt="User Image"><span
                    class="status"></span><h4 class="name">{{ username }}</h4></a>
                <ul class="dropdown-menu">
                    <li><a href="{% url 'user:logout' %}"><i class="fa fa-power-off"></i>退出登录</a></li>
                </ul>
            </div>
        </div>
    </div>
</header>
<div class="content-wrapper container-fluid">
    <aside class="left-panel">
        <div class="user-card background-bg" data-image-src="images/bg5.jpg"><a href="#">
            <div class="avatar mr-3 float-left">
                <img class="rounded-circle" src="{% static 'picture/4.jpg' %}" alt="Avatar">
            </div>
            <div class="details">
                <h4 class="name">{{ username }}</h4>
            </div>
        </a></div>
        <nav class="navbar">
            <ul class="navbar-nav">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button"
                       data-toggle="dropdown" aria-haspopup="true"
                       aria-expanded="false">
                        <i class="fa fa-dashboard"> </i>
                        <span class="menu-title">平台主页</span>
                    </a>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="{% url 'user:index' %}">数据看板</a>
                    </div>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button"
                       data-toggle="dropdown" aria-haspopup="true"
                       aria-expanded="false">
                        <i class="fa fa-table"></i>
                        <span class="menu-title">空气质量数据</span>
                    </a>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="{% url 'dataset:display' %}">展示数据</a>
                        <a class="dropdown-item" href="{% url 'dataset:add' %}">上传数据</a>
                    </div>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown"
                       aria-haspopup="true" aria-expanded="false">
                        <i class="fa fa-pie-chart"></i>
                        <span class="menu-title">数据图表</span>
                        <span class="badge danger">14</span>
                    </a>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="{% url 'chart:AQI_line_chart' %}">AQI折线图</a>
                        <a class="dropdown-item" href="{% url 'chart:trend_chart_of_pm2_5' %}">PM2.5变化趋势图</a>
                        <a class="dropdown-item" href="{% url 'chart:trend_chart_of_pm10' %}">PM10变化趋势图</a>
                        <a class="dropdown-item" href="{% url 'chart:trend_chart_of_so2' %}">So2变化趋势图</a>
                        <a class="dropdown-item" href="{% url 'chart:trend_chart_of_no2' %}">No2变化趋势图</a>
                        <a class="dropdown-item" href="{% url 'chart:trend_chart_of_co' %}">Co变化趋势图</a>
                        <a class="dropdown-item" href="{% url 'chart:trend_chart_of_o3' %}">O3变化趋势图</a>
                        <a class="dropdown-item" href="{% url 'chart:AQI_monthly_distribution' %}">一线城市AQI指标每月分布图</a>
                        <a class="dropdown-item" href="{% url 'chart:AQI_trend_analysis' %}">中国空气质量趋势图</a>
                        <a class="dropdown-item" href="{% url 'chart:AQI_distribution' %}">指标分布图</a>
                        <a class="dropdown-item" href="{% url 'chart:AQI_map_distribution' %}">地图分布图</a>
                        <a class="dropdown-item" href="{% url 'chart:AQI_level_distribution' %}">空气污染等级分布</a>
                        <a class="dropdown-item" href="{% url 'chart:AQI_concentration_distribution' %}">空气污染浓度分布</a>
                        <a class="dropdown-item" href="{% url 'chart:pollutant_correlation_analysis' %}">污染物相关性分析</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <i class="fa fa-flask"></i>
                        <span class="menu-title">AQI预测</span>
                    </a>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="{% url 'predict:AQI_prediction_lstm' %}">基于LSTM模型</a>
                        <a class="dropdown-item" href="{% url 'predict:AQI_prediction_gru' %}">基于GRU模型</a>
                    </div>
                </li>
            </ul>
        </nav>
    </aside>
    <div class="dashboard-contents">
        <!-- 核心内容展示区 -->
        <div class="contents-inner">
            <div class="row" style="height: 1080px">
            {% csrf_token %}

            <div class="data">

                <div class="data-title">
                    <div class="title-left fl"></div>
                    <div class="title-center fl"></div>
                    <div class="title-right fr"></div>
                </div>
                <div class="data-content">
                    <div class="con-left fl">
                        <div class="left-top">
                            <div class="info" style="height: 955px">
                                <div class="info-title">统计数据</div>
                                <img src="{% static 'img/bj-1.png' %}" alt="" class="bj-1">
                                <img src="{% static 'img/bj-2.png' %}" alt="" class="bj-2">
                                <img src="{% static 'img/bj-3.png' %}" alt="" class="bj-3">
                                <img src="{% static 'img/bj-4.png' %}" alt="" class="bj-4">
                                <div class="info-main">
                                    <div class="info-1">
                                        <div class="info-img fl">
                                            <img src="{% static 'img/info-img-1.png' %}" alt="" width="50px">
                                        </div>
                                        <div class="info-text fl">
                                            <p>数据量统计</p>
                                            <p>56604</p>
                                        </div>
                                    </div>
                                    <div class="info-2">
                                        <div class="info-img fl">
                                            <img src="{% static 'img/info-img-2.png' %}" alt="" width="50px">
                                        </div>
                                        <div class="info-text fl">
                                            <p>城市统计</p>
                                            <p>31</p>
                                        </div>
                                    </div>
                                    <div class="info-3">
                                        <div class="info-img fl">
                                           <img src="{% static 'img/info-img-3.png' %}" alt="">
                                        </div>
                                        <div class="info-text fl">
                                            <p>日期统计(天)</p>
                                            <p>1825</p>
                                        </div>
                                    </div>
                                    <div class="info-4">
                                        <div class="info-img fl">
                                            <img src="{% static 'img/info-img-4.png' %}" alt="">
                                        </div>
                                        <div class="info-text fl">
                                            <p>省份统计</p>
                                            <p>31</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="con-center fl">
                        <div class="map-num">
                            <p>全国主要城市空气质量</p>
                        </div>
                        <div class="cen-top" id="mapChart" style="width: 100%"></div>
                        <div class="cen-bottom">
                            <div class="title">城市AQI变化图</div>
                            <img src="{% static 'img/bj-1.png' %}" alt="" class="bj-1">
                            <img src="{% static 'img/bj-2.png' %}" alt="" class="bj-2">
                            <img src="{% static 'img/bj-3.png' %}" alt="" class="bj-3">
                            <img src="{% static 'img/bj-4.png' %}" alt="" class="bj-4">
                            <div id="pmChart4" class="charts"></div>
                        </div>
                    </div>
                    <div class="con-right fr">
                        <div class="right-top">
                            <div class="title">PM2.5变化</div>
                            <img src="{% static 'img/bj-1.png' %}" alt="" class="bj-1">
                            <img src="{% static 'img/bj-2.png' %}" alt="" class="bj-2">
                            <img src="{% static 'img/bj-3.png' %}" alt="" class="bj-3">
                            <img src="{% static 'img/bj-4.png' %}" alt="" class="bj-4">
{#                            <div id="echarts_4" class="charts"></div>#}
                            <div id="pmChart1" class="charts"></div>
                        </div>
                        <div class="right-center">
                            <div class="title">PM10变化</div>
                            <img src="{% static 'img/bj-1.png' %}" alt="" class="bj-1">
                            <img src="{% static 'img/bj-2.png' %}" alt="" class="bj-2">
                            <img src="{% static 'img/bj-3.png' %}" alt="" class="bj-3">
                            <img src="{% static 'img/bj-4.png' %}" alt="" class="bj-4">
{#                            <div id="echarts_5" class="charts"></div>#}
                            <div id="pmChart2" class="charts"></div>
                        </div>
                        <div class="right-bottom">
                            <div class="title">NO2变化</div>
                            <img src="{% static 'img/bj-1.png' %}" alt="" class="bj-1">
                            <img src="{% static 'img/bj-2.png' %}" alt="" class="bj-2">
                            <img src="{% static 'img/bj-3.png' %}" alt="" class="bj-3">
                            <img src="{% static 'img/bj-4.png' %}" alt="" class="bj-4">
{#                            <div id="echarts_6" class="charts"></div>#}
                            <div id="pmChart3" class="charts"></div>
                        </div>
                    </div>
                </div>
            </div>
            </div>
        </div>
        <footer class="site-footer">
            <div class="copyright">
                <div class="float-left">2024</div>
                <div class="float-right">
                    By myself
                </div>
            </div>
        </footer>
    </div>
</div>
<script src="{% static 'js/jquery-3.2.1.slim.min.js' %}"></script>
<script src="{% static 'js/plugins.js' %}"></script>
<script src="{% static 'js/raphael-min1.js' %}"></script>
<script src="{% static 'js/morris1.js' %}"></script>
<script src="{% static 'js/chartist.min1.js' %}"></script>
<script src="{% static 'js/chartist-plugin-legend1.js' %}"></script>
<script src="{% static 'js/jquery.sparkline.min1.js' %}"></script>
<script src="{% static 'js/jquery.flot1.js' %}"></script>
<script src="{% static 'js/jquery.flot.pie1.js' %}"></script>
<script src="{% static 'js/jquery.flot.resize1.js' %}"></script>
<script src="{% static 'js/jquery.flot.spline1.js' %}"></script>
<script src="{% static 'js/charts.init1.js' %}"></script>
<script src="{% static 'js/owl.carousel.min1.js' %}"></script>
<script src="{% static 'js/weather1.js' %}"></script>
<script src="{% static 'js/moment.js' %}"></script>
<script src="{% static 'js/fullcalendar.min.js' %}"></script>
<script src="{% static 'js/index-011.js' %}"></script>
<script src="{% static 'js/echarts.min.js' %}"></script>
<script src="{% static 'js/china.js' %}"></script>
<script src="{% static 'js/echarts.min.js' %}"></script>
<script src="{% static 'js/china.js' %}"></script>
<script src="{% static 'js/echarts.js' %}"></script>
<script>$(function () {
    "use strict";
    $('#calendar').fullCalendar();
});</script>
<script>
    var myChart = echarts.init(document.getElementById('mapChart'));

    $(document).ready(function () {
        // 获取当前时间
        var now = new Date();
        // 获取年、月、日、时、分、秒
        var year = now.getFullYear();
        var month = now.getMonth() + 1; // 月份是从0开始的，所以需要加1
        var day = now.getDate();
        var hours = now.getHours();
        var minutes = now.getMinutes();
        var seconds = now.getSeconds();

        // 对于单个数字的月、日、时、分、秒，前面补零以保持两位数格式
        month = String(month).padStart(2, '0');
        day = String(day).padStart(2, '0');
        hours = String(hours).padStart(2, '0');
        minutes = String(minutes).padStart(2, '0');
        seconds = String(seconds).padStart(2, '0');

        // 格式化为"年-月-日 时:分:秒"
        var formattedTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;

        $.ajax({
            url: '{% url 'chart:AQI_map_distribution' %}',
            type: 'post',
            headers: {"X-CSRFToken": $("[name='csrfmiddlewaretoken']").val()},
            success: function(data) {
                var option = {
                    title: {
                        text: '全国主要城市空气质量',
                        color: '#fff',
                        subtext: '数据日期: ' + formattedTime,
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    visualMap: {
                        min: 0,
                        max: 300,
                        text: ['高', '低'],
                        realtime: false,
                        calculable: true,
                        inRange: {
                            color: ['#00e400', '#ffff00', '#ff7e00', '#ff0000', '#99004c', '#7e0023']
                        },
                        pieces: [
                            {min: 0, max: 50, color: '#00e400'}, // 绿色
                            {min: 51, max: 100, color: '#ffff00'}, // 黄色
                            {min: 101, max: 150, color: '#ff7e00'}, // 橙色
                            {min: 151, max: 200, color: '#ff0000'}, // 红色
                            {min: 201, max: 300, color: '#99004c'}, // 紫色
                            {min: 301, color: '#7e0023'} // 深紫色
                        ]
                    },
                    series: [{
                        name: 'AQI',
                        type: 'map',
                        mapType: 'china',
                        label: {
                            show: true
                        },
                        data: data.mapData
                    }]
                };
                myChart.setOption(option);
            },
            error: function(error) {
                console.error('请求数据失败:', error);
            }
        });
    });
</script>

<script>
    var pmChart1 = echarts.init(document.getElementById('pmChart1'));

    $(document).ready(function () {
        var pollution = 'pm2_5';
        if (pollution) {
            $.ajax({
                url: '{% url 'chart:AQI_concentration_distribution' %}',
                type: 'post',
                headers: {"X-CSRFToken": $("[name='csrfmiddlewaretoken']").val()},
                data: {'pollution': pollution},
                success: function(data) {
                    var option = {
                        title: {
                            left: 'center',
                            color: '#fff',
                            text: pollution + '污染物浓度分布'
                        },
                      xAxis: {
                        type: 'category',
                        data: data.x_data
                      },
                      yAxis: {
                        type: 'value'
                      },
                      series: [
                        {
                          data: data.y_data,
                          type: 'bar',
                          showBackground: true,
                          backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                          }
                        }
                      ]
                    };
                    pmChart1.setOption(option);
                },
                error: function(error) {
                    console.error('请求数据失败:', error);
                }
            });
        }
    });
</script>

<script>
    var pmChart2 = echarts.init(document.getElementById('pmChart2'));

    $(document).ready(function () {
        var pollution = 'pm10';
        if (pollution) {
            $.ajax({
                url: '{% url 'chart:AQI_concentration_distribution' %}',
                type: 'post',
                headers: {"X-CSRFToken": $("[name='csrfmiddlewaretoken']").val()},
                data: {'pollution': pollution},
                success: function(data) {
                    var option = {
                        title: {
                            left: 'center',
                            color: '#fff',
                            text: pollution + '污染物浓度分布'
                        },
                      xAxis: {
                        type: 'category',
                        data: data.x_data
                      },
                      yAxis: {
                        type: 'value'
                      },
                      series: [
                        {
                          data: data.y_data,
                          type: 'bar',
                          showBackground: true,
                          backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                          }
                        }
                      ]
                    };
                    pmChart2.setOption(option);
                },
                error: function(error) {
                    console.error('请求数据失败:', error);
                }
            });
        }
    });
</script>

<script>
    var pmChart3 = echarts.init(document.getElementById('pmChart3'));

    $(document).ready(function () {
        var pollution = 'no2';
        if (pollution) {
            $.ajax({
                url: '{% url 'chart:AQI_concentration_distribution' %}',
                type: 'post',
                headers: {"X-CSRFToken": $("[name='csrfmiddlewaretoken']").val()},
                data: {'pollution': pollution},
                success: function(data) {
                    console.log(data.x_data);
                    var option = {
                        title: {
                            left: 'center',
                            color: '#fff',
                            text: pollution + '污染物浓度分布'
                        },
                      xAxis: {
                        type: 'category',
                        data: data.x_data
                      },
                      yAxis: {
                        type: 'value'
                      },
                      series: [
                        {
                          data: data.y_data,
                          type: 'bar',
                          showBackground: true,
                          backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                          }
                        }
                      ]
                    };
                    pmChart3.setOption(option);
                },
                error: function(error) {
                    console.error('请求数据失败:', error);
                }
            });
        }
    });
</script>

<script>
        const schema = [
            {name: 'date', index: 0, text: '日'},
            {name: 'AQIindex', index: 1, text: 'AQI指数'},
            {name: 'PM25', index: 2, text: 'PM2.5'},
            {name: 'PM10', index: 3, text: 'PM10'},
            {name: 'CO', index: 4, text: '一氧化碳（CO）'},
            {name: 'NO2', index: 5, text: '二氧化氮（NO2）'},
            {name: 'SO2', index: 6, text: '二氧化硫（SO2）'}
        ];
        const itemStyle = {
            opacity: 0.8,
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowColor: 'rgba(0,0,0,0.3)'
        };
        var pmChart4 = echarts.init(document.getElementById('pmChart4'));

        // 等界面加载完毕后发送Ajax请求
        $(document).ready(function () {
            $.ajax({
                url: '{% url 'chart:AQI_monthly_distribution' %}',
                type: 'post',
                headers: {"X-CSRFToken": $("[name='csrfmiddlewaretoken']").val()},
                success: function (data) {
                    console.log("成功");
                    const dataBJ = data['北京'];
                    const dataSH = data['上海'];
                    const dataGZ = data['广州'];
                    var option = {
                        color: ['#dd4444', '#fec42c', '#80F1BE'],
                        legend: {
                            top: 10,
                            data: ['北京', '上海', '广州'],
                            textStyle: {
                                fontSize: 16
                            }
                        },
                        grid: {
                            left: '10%',
                            right: 150,
                            top: '18%',
                            bottom: '10%'
                        },
                        tooltip: {
                            backgroundColor: 'rgba(100,100,100,0.5)',
                            formatter: function (param) {
                                var value = param.value;
                                // prettier-ignore
                                return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
                                    + param.seriesName + ' ' + value[0] + '日：'
                                    + value[7]
                                    + '</div>'
                                    + schema[1].text + '：' + value[1] + '<br>'
                                    + schema[2].text + '：' + value[2] + '<br>'
                                    + schema[3].text + '：' + value[3] + '<br>'
                                    + schema[4].text + '：' + value[4] + '<br>'
                                    + schema[5].text + '：' + value[5] + '<br>'
                                    + schema[6].text + '：' + value[6] + '<br>';
                            }
                        },
                        xAxis: {
                            type: 'value',
                            name: '日期',
                            nameGap: 16,
                            nameTextStyle: {
                                fontSize: 16
                            },
                            max: 31,
                            splitLine: {
                                show: false
                            }
                        },
                        yAxis: {
                            type: 'value',
                            name: 'AQI指数',
                            nameLocation: 'end',
                            nameGap: 20,
                            nameTextStyle: {
                                fontSize: 16
                            },
                            splitLine: {
                                show: false
                            }
                        },
                        visualMap: [
                            {
                                left: 'right',
                                top: '10%',
                                dimension: 2,
                                min: 0,
                                max: 250,
                                itemWidth: 30,
                                itemHeight: 120,
                                calculable: true,
                                precision: 0.1,
                                text: ['圆形大小：PM2.5'],
                                textGap: 30,
                                inRange: {
                                    symbolSize: [10, 70]
                                },
                                outOfRange: {
                                    symbolSize: [10, 70],
                                    color: ['rgba(255,255,255,0.4)']
                                },
                                controller: {
                                    inRange: {
                                        color: ['#c23531']
                                    },
                                    outOfRange: {
                                        color: ['#999']
                                    }
                                }
                            },
                            {
                                left: 'right',
                                bottom: '5%',
                                dimension: 6,
                                min: 0,
                                max: 50,
                                itemHeight: 120,
                                text: ['明暗：二氧化硫'],
                                textGap: 30,
                                inRange: {
                                    colorLightness: [0.9, 0.5]
                                },
                                outOfRange: {
                                    color: ['rgba(255,255,255,0.4)']
                                },
                                controller: {
                                    inRange: {
                                        color: ['#c23531']
                                    },
                                    outOfRange: {
                                        color: ['#999']
                                    }
                                }
                            }
                        ],
                        series: [
                            {
                                name: '北京',
                                type: 'scatter',
                                itemStyle: itemStyle,
                                data: dataBJ
                            },
                            {
                                name: '上海',
                                type: 'scatter',
                                itemStyle: itemStyle,
                                data: dataSH
                            },
                            {
                                name: '广州',
                                type: 'scatter',
                                itemStyle: itemStyle,
                                data: dataGZ
                            }
                        ]
                    };
                    pmChart4.setOption(option);
                },
                error: function (error) {
                    console.log("成功");
                    console.error('请求数据失败:', error);
                }
            });

        });
    </script>

</body>
</html>

